<template>
  <div class="template-workUnitChangeForm-Lu">
    <a-modal
      title="申请解聘审核"
      :visible="increaseVisible"
      :maskClosable="false"
      :closable="true"
      :destroyOnClose="true"
      :footer="false"
      :dialog-style="{ margin: '0 auto' }"
      width="70%"
      wrapClassName="form-retirementRecruitmentJpModal-Lu"
      @cancel="closeVisible">
      <div>
        <div style="text-align: right;">
          <a-button class="blue-btn" style="margin: 10px;" @click="printBtn">打印</a-button>
        </div>
        <a-form layout="inline" class="personal-info-form" :form="form" :key="formKey">
          <h2 style="text-align: center;">xx食品药品审评查验中心申请解聘表</h2>
          <a-descriptions bordered style="width: 100%;" :column="2" class="descriptions-dengji">
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                姓名
              </span>
              <a-form-item>
              {{ fromState.realname }}
            </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                性别
              </span>
              <a-form-item>
                <span v-if="fromState.sex == 1">男</span>
                <span v-if="fromState.sex == 2">女</span>
            </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                申请日期
              </span>
              <a-form-item>
                {{ moment(fromState.ffqsj).format('YYYY-MM-DD') }}
              </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item>
              <span slot="label" class="descriptions-label-slot">
                工作单位
              </span>
              <a-form-item>
              {{ fromState.fgzdw }}
            </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                审评类型
              </span>
              <a-form-item class="flex-w-row">
                  <!-- <a-checkbox-group
                    v-model="plainOptions"
                    disabled
                    name="checkboxgroup"
                    :options="plainOptions"
                  /> -->
                  <span v-if="plainOptions.length">{{ plainOptions.toString() }}</span>
                  <span v-else>暂无数据</span>
                </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                申请解聘类型
              </span>
              <a-form-item>
                {{ fromState.fsqjcylb?fromState.fsqjcylb.toString():'' }}
            </a-form-item>
            </a-descriptions-item>
            <a-descriptions-item :span="2">
              <span slot="label" class="descriptions-label-slot">
                  申请原因
              </span>
              <a-form-item class="flex-w-row">
                {{ fromState.fsqyy }}
              </a-form-item>
            </a-descriptions-item>
            <!-- <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" v-if="!isView">*</span>
                    办理意见
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fblyj }}</span>
                  <a-textarea v-else placeholder="" v-model="fromState.fblyj"
                          :auto-size="{ minRows: 3}"
                          v-decorator="[ 'fblyj', {initialValue:fromState.fblyj,rules: rules.fblyj}]"/>
                </a-form-item>
              </a-descriptions-item> -->
              <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" v-if="!isView">*</span>
                    经办人意见
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fblyj }}</span>
                  <a-textarea v-else placeholder="" v-model="fromState.fblyj"
                          :auto-size="{ minRows: 3}"
                          v-decorator="[ 'fblyj', {initialValue:fromState.fblyj,rules: rules.fblyj}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" v-if="!isView">*</span>
                  科室领导意见
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fblyj }}</span>
                  <a-textarea v-else placeholder="" v-model="fromState.fblyj"
                          :auto-size="{ minRows: 3}"
                          v-decorator="[ 'fblyj', {initialValue:fromState.fblyj,rules: rules.fblyj}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" v-if="!isView">*</span>
                  中心分管领导意见
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fblyj }}</span>
                  <a-textarea v-else placeholder="" v-model="fromState.fblyj"
                          :auto-size="{ minRows: 3}"
                          v-decorator="[ 'fblyj', {initialValue:fromState.fblyj,rules: rules.fblyj}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" v-if="!isView">*</span>
                  中心主要领导意见
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fblyj }}</span>
                  <a-textarea v-else placeholder="" v-model="fromState.fblyj"
                          :auto-size="{ minRows: 3}"
                          v-decorator="[ 'fblyj', {initialValue:fromState.fblyj,rules: rules.fblyj}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                  <span class="xhText" v-if="!isView">*</span>
                  xx药品监督管理局<br/>意见
                </span>
                <a-form-item class="flex-w-row">
                  <span v-if="isView">{{ fromState.fblyj }}</span>
                  <a-textarea v-else placeholder="" v-model="fromState.fblyj"
                          :auto-size="{ minRows: 3}"
                          v-decorator="[ 'fblyj', {initialValue:fromState.fblyj,rules: rules.fblyj}]"/>
                </a-form-item>
              </a-descriptions-item>
              <a-descriptions-item :span="2">
                <span slot="label" class="descriptions-label-slot">
                    上传文件
                </span>
                <a-form-item v-if="isView">
                  <a href="#" style="margin-left: 5px;" v-if="fromState.ffjdz" @click="downloadPdf(fromState.ffjdz)">{{fileName}}</a>
                  <span v-else>暂无图片</span></a-form-item>
                <a-form-item v-else class="flex-w-row">
                  <a-upload style="display: inline-block;" :beforeUpload="beforeUpload" :showUploadList="false" action="" @change="uploadClick">
                    <a-button class="blue-btn">选择文件<span style="color: red;">(仅限PDF)</span></a-button>
                  </a-upload>
                  <a href="#" style="margin-left: 5px;" v-if="fromState.ffjdz" @click="downloadPdf(fromState.ffjdz)">{{fileName}}</a>
                  <span v-else>暂无图片</span>
                </a-form-item>
              </a-descriptions-item>
          </a-descriptions>
        </a-form>
        <div v-if="isView" class="modal-footer-div">
          <a-button class="blue-btn" @click="closeVisible">关闭</a-button>
        </div>
        <div v-if="!isView" class="modal-footer-div">
          <a-button class="red-btn" @click="nextClick('否')">驳回</a-button>
          <a-button class="blue-btn" style="margin-left: 10px;" @click="nextClick('是')">同意</a-button>
        </div>
      </div>
    </a-modal>
    <printForm ref="printFormRef"></printForm>
  </div>
</template>
<script>
import moment from 'moment'
import { querySqInfo,dict,submitSh,uploadFile } from './service/index'
import printForm from './printForm.vue'
export default {
  components: {
      printForm
  },
  data() {
    return {
      moment,
      increaseVisible: false,
      formKey: '',
      form: this.$form.createForm(this, { name: 'appointmentOfInspectorsFrom' }),
      fromState:{},
      plainOptions: [],
      rules:{
        fblyj: [{
            required: true,
            message: '请输入意见',
            trigger: 'blur',
        }],
      },
      fileName: '申请解聘表.pdf',
      isView: false,
    }
  },
  methods: {
    getNewData(ids,type){
      this.isView = type
      querySqInfo({id:ids}).then(res => {
        //console.log(res)
        let resItem = res.result
        let data1 = {}
        data1 = {
          id: resItem.id,
          ffqsj: resItem.ffqsj?resItem.ffqsj:new Date(),
          realname: resItem.realname,
          sex: resItem.sex,
          fsfzh: resItem.fsfzh,
          fgzdw: resItem.fgzdw,
          ftxsj: resItem.ftxsj?moment(resItem.ftxsj):null,
          fyjcylb: resItem.fyjcylb,
          fsqjcylb: resItem.fsqjcylb?resItem.fsqjcylb.split(','):null,
          fsqyy: resItem.fsqyy,
          fblyj: resItem.fblyj,
          ffjdz: resItem.ffjdz,
        }
        this.fromState = data1
        this.getdict()
        //console.log(this.fromState)
        this.formKey = Date.now()
      })
    },
    getdict(){
      dict("检查员登记类别").then(res => {
        res.result.forEach((item,index) => {
          //console.log(this.fromState.fyjcylb,item)
          if(this.fromState.fyjcylb.indexOf(item.itemValue) !== -1){
            this.plainOptions.push(item.itemValue)
          }
        })
      })
    },
    downloadPdf(href){
      window.open(href,'_blank')
    },
    closeVisible(){
      this.increaseVisible = false
      this.$emit('success')
    },
    printBtn(){
      this.$refs.printFormRef.getNewData(this.fromState.id)
      this.$refs.printFormRef.increaseVisible = true
    },
    beforeUpload(e){
      return false
    },
    uploadClick({file}){
      //console.log(file)
      var that = this
        if(file.type.indexOf('pdf') == -1){
          that.$message.warning('当前仅限上传PDF，请重新选择！')
          return
        }
        if(typeof file.uid !== 'undefined') {
          const fileData = new FormData();
          fileData.append("file",file);
          fileData.append("id",that.fromState.id,);
          //console.log(fileData)
          uploadFile(fileData).then(res => {
            //console.log('fileData',res)
            if (res.success) {
              that.$message.success(res.message)
              that.fromState.ffjdz = res.result.ffjdz
              that.formKey = Date.now()
            } else {
              that.$message.warning(res.message)
            }
          })
        } else {}
    },
    // 驳回
    nextClick(isAgree){
      this.form.validateFields((err, values) => {
        if(!err){
          let data = {
            id: this.fromState.id,
            opinion: this.fromState.fblyj,
            sfty: isAgree
          }
          submitSh(data).then(res => {
            if(res.code == 200){
              this.$message.success(res.message)
              this.closeVisible()
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    }
  },
}
</script>
<style lang="less">
.form-retirementRecruitmentJpModal-Lu {
  .personal-info-form{
    .ant-form-item{
        margin: 5px 0;
    }
    .ant-form-item-label{
        width: 118px;
        font-weight: 600;
    }
    .ant-form-item-control-wrapper{
        // width: 180px;
    }
    .flex-w-er{
        width: 596px;
        .ant-form-item-control-wrapper{
            width: calc(100% - 118px);
        }
    }
    .flex-w-san{
      // width: 885px;
      width: calc(100vw - 1180px);
      min-width: 865px;
      .ant-form-item-control-wrapper{
            width: calc(100% - 118px);
        }
    }
    .flex-w-row {
      width: 100%;
      .ant-form-item-control-wrapper{
            width: calc(100%);
        }
    }
    .flex-w-label {
      .ant-form-item-label{
          width: 250px;
      }
    }
  }
  .modal-footer-div {
    display: flex;
    justify-content: end;
    margin-top: 30px;
  }
  .photo-frame {
    width: 100%;
    height: 300px;
    border: 1px dashed #d9d9d9;
    background-color: #fafafa;
    border-radius: 4px;
  }
  //---
  .ant-descriptions-bordered .ant-descriptions-item-label{
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        background-color:#e6f7ff;
        width: 150px !important;
        text-align: right;
        font-size: 16px;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        padding: 5px 10px !important;

    }
    .descriptions-dengji {
        .descriptions-label-slot{
          display: flex;
          align-items: center;
          width: 169px !important;//确保左侧固定文字不会换行
          line-height: 2;
          text-align: center;
          justify-content: center;
      }
      .descriptions-content-item {
        .ant-form-item-control-wrapper{
            width: 100%;
        }
      }
    }
    .descriptions-row .descriptions-label-slot{
        display: flex;
        align-items: center;
        width: 100px !important;//确保左侧固定文字不会换行
    }
    .xhText{

        color: #f5222d;
        line-height: 36px;
        font-size: 21px;
        font-weight: 600;
        height: 30px;
    }
    .descriptions-item-center{

    }
    .ant-form-inline .ant-form-item-with-help{
        margin-bottom: 0px !important;
    }
    .zm-form-model{
        display: flex;
        .ant-form-item-control-wrapper{
            flex: 1;
        }
    }
    .ant-descriptions-bordered .ant-descriptions-row{
        border-bottom: 1px solid #e4e3e3;
    }
    .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content{
        border-right: 1px solid #e4e3e3;
        line-height: 3;
        min-width: 100px;
    }
    .ant-descriptions-bordered .ant-descriptions-view{
        border: 1px solid #e4e3e3;
        border-right: 0;
    }
    .ant-descriptions-row:last-child{
        border-bottom: 0;
    }
}
</style>
